<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!--   搜索     -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" @click="addTestRun">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refreshTestRunList">刷新</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchTestRun">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table
            ref="multipleTableRef"
            :data="testRunList.list"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column label="Date" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="Name" width="120"/>
          <el-table-column property="address" label="Address"/>
        </el-table>
      </el-main>
    </el-container>
  </div>
  <el-dialog
      v-model="addRunDialogShow"
      :custom-class="'fixed-dialog'"
      width="1000px"
  >
    <div class="common-layout">
      <el-container>
        <el-aside width="150px">
          <el-anchor :offset="70">
            <el-anchor-link href="#m1">
              <span>选择测试设备</span>
            </el-anchor-link>

            <el-anchor-link href="#m2">
              <span>第二章</span>
            </el-anchor-link>
            <el-anchor-link href="#m3">
              <span>第三章</span>
            </el-anchor-link>
            <el-anchor-link href="#m4">
              <span>第四章</span>
            </el-anchor-link>
          </el-anchor>
        </el-aside>
        <el-main class="dialog-content">
          <ul>
            <!--                udid: string;
                name: string;
                imei: string;
                status: string;-->
            <li id="m1">选择测试设备</li>
            <el-table :data="devices.list" style="width: 100%">
              <el-table-column type="selection" width="55" :selectable="devSelectable"/>
              <el-table-column prop="udid" label="udid" width="180"/>
              <el-table-column prop="name" label="name" width="180"/>
              <el-table-column prop="imei" label="imei"/>
              <el-table-column prop="status" label="status"/>
            </el-table>
            <li id="m2">第二章</li>
            <li v-for="n in 30" :key="n">
              这是第二章第 {{ n }} 行内容。这是为了模拟大量内容的滚动效果。
            </li>
            <li id="m3">第三章</li>

            <li v-for="n in 30" :key="n">
              这是第三章第 {{ n }} 行内容。这是为了模拟大量内容的滚动效果。
            </li>
            <li id="m4">第四章</li>
            <li v-for="n in 30" :key="n">
              这是第四章第 {{ n }} 行内容。这是为了模拟大量内容的滚动效果。
            </li>
          </ul>


        </el-main>
      </el-container>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addRunDialogShow = false">Cancel</el-button>
        <el-button type="primary" @click="addRunDialogShow = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>


<script setup lang="ts">

import {showMsg, ShowType} from "@/plugin/message.ts";
import {onMounted, reactive, ref} from "vue";
import {InitTestRunList} from "@/type/test_run.ts";
import {apiGetDeviceList} from "@/request/device/api.ts";
import {InitDeviceList} from "@/type/device.ts";


const testRunList = reactive(new InitTestRunList())

onMounted(
    () => {
      getDevices()
    }
)
// ==========================================工具栏=======================================
// 添加TestRun
const addRunDialogShow = ref(false)
const value = ref('Mon')
const devices = reactive(new InitDeviceList())
const devSelectable = (row) => {
  return row.status === 'online'
}
const getDevices = (params = {}) => {
  // 默认参数
  const defaultParams = {
    page: 1,         // 当前页码
    pageSize: 10,    // 每页数据量
    filter: '',      // 过滤条件
  };

  // 合并传入的参数与默认参数
  const finalParams = {...defaultParams, ...params};
  apiGetDeviceList(finalParams).then(
      (res) => {

        devices.list = res.results
        devices.otherData.count = res.count
        // devices.otherData.page = res.page
        devices.otherData.pageSize = res.pageSize

      }
  )
}
// =========================================================
const addTestRun = () => {

  addRunDialogShow.value = true
  // getAdbDevices()
  // showMsg(ShowType.info, 'addTestRun')
}

// 刷新TestRun
const refreshTestRunList = () => {
  showMsg(ShowType.info, 'refreshTestRunList')
}

// 搜索TestRun
const searchTestRun = () => {
  showMsg(ShowType.info, 'searchTestRun')
}


testRunList.list = [
  {
    id: 1,
    name: 'test1',

    date: '2022-01-01'
  },
  {
    id: 2,
    name: 'test2',
    date: '2022-01-02'
  },
  {
    id: 3,
    name: 'test3',
    date: '2022-01-03'
  },
  {
    id: 4,
    name: 'test4',
  }
]


interface TestRunI {
  id: number;
  name: string;
  date: string;
}

// 已选择的TestRun
const selectedTestRuns = ref<TestRunI[]>([])
const handleSelectionChange = (val) => {
  selectedTestRuns.value = val
  console.log(selectedTestRuns.value)
}
</script>


<style scoped>
.dialog-content {
  height: 400px;

  overflow-y: inherit;
}

</style>